<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片透明</title>
<style>
img {
    opacity: 0.4;
    filter: alpha(opacity=40);/*适用IE8及其更早版本*/
}
img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);/*适用IE8及其更早版本*/
}
</style>
</head>
<body>
    <h1>图片透明度</h1>
    <p>opacity属性通常与：hover选择器一起使用，在鼠标移动到图片上后改名图片的透明度：</p>
    <img src="https://www.runoob.com/try/demo_source/klematis.jpg" width="150" height="113" alt="klematis">
    <img src="https://www.runoob.com/images/klematis2.jpg" width="150" height="113" alt="klematis">
    <p><b>注意：</b>在IE中必须声明&lt；！DOCTYPE&gt;才能保证：hover选择器能够有效</p>
    </body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片透明度</title>
<style>
    div.background {
        width: 500px;
        height: 250px;
        background: url(https://www.runoob.com/try/demo_source/klematis.jpg) repeat;
        border: 2px solid black;
    }
    div.transbox {
        width: 400px;
        height: 180;
        margin: 30px 50px;
        background-color: #ffffff;
        border: 1px solid black;
        opacity: 0.6;
        filter: alpha(opacity=60);
    }
    div.transbox p {
        margin: 30px 40px;
        font-weight: bold;
        color: #000000;
    }
    </style>
    </head>
    <body>
        <div class="background">
            <div class="transbox">
            <p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。</p>
            </div>
        </div>
        </body>
</html>